<!--
 * @Author: wuyang
 * @Description: 
 * @Date: 2022-12-29 22:56:10
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-13 11:35:43
 * @FilePath: \vue-ts-vite\src\views\home\index.vue
-->
<template>
  <el-container class="home-container">
    <el-header class="flex justify-between">
      <DataCart />
    </el-header>
    <el-main>
      <el-row class="main-row" :gutter="20">
        <!-- <el-col :span="12" class="main-col">
          <div class="charts-box">
            <h4 class="chart-title">活动数量</h4>
            <div class="chart-content"><LineChart /></div>
          </div>
        </el-col> -->
        <el-col :span="24" class="main-col"
          ><div class="charts-box">
            <h4 class="chart-title">活跃学生人数</h4>
            <div class="chart-content">
              <AreaChart />
            </div></div
        ></el-col>
      </el-row>
      <el-row :gutter="20" class="main-row">
        <el-col :span="8" class="main-col">
          <div class="charts-box">
            <h4 class="chart-title">各年级学生占比</h4>
            <div class="chart-content"><RingDiagram /></div>
          </div>
        </el-col>
        <el-col :span="16" class="main-col"
          ><div class="charts-box">
            <h4 class="chart-title">各学院参加社团学生人数</h4>
            <div class="chart-content"><BarChart /></div></div
        ></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import DataCart from "./components/cardItem.vue";
import BarChart from "./components/barChart.vue";
import AreaChart from "./components/areaChart.vue";
import RingDiagram from "./components/pieChart.vue";
import LineChart from "./components/lineChart.vue";
</script>

<style scoped lang="scss">
.home-container {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 4fr;
  .el-header {
    height: 100%;
  }
  .el-main {
    .main-row {
      width: 100%;
      height: 47%;
      margin-left: 0 !important;
      margin-right: 0 !important;
      .main-col {
        height: 100%;
        &:first-child {
          padding-left: 0 !important;
        }
        &:last-child {
          padding-right: 0 !important;
        }
      }
      &:last-child {
        height: 50% !important;
        margin-top: 1%;
      }
    }
    .charts-box {
      height: 100%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      .chart-title {
        padding: 8px 20px;
        border-bottom: 1px solid #ccc;
        color: #666;
        font-size: 1.8rem;
      }
      .chart-content {
        flex: 1;
      }
    }
  }
}
</style>
